* { 
	margin: 0; padding: 0;
	font-family: 'Droid Sans', sans-serif; 
	text-decoration: none;
	list-style: none;
}
a {	
	cursor: pointer;
	transition: color .4s; 
	-moz-transition: color .4s; 
	-webkit-transition: color .4s; 
}
h1 *, h2 *, h3 * { font-family: 'Roboto Condensed', sans-serif; }

/*html, body { height: 100%; }*/
body { width: 100%; overflow-x: hidden; }
section { min-height: 40px; }
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/

#main { 
	width: 100%; height: 100%;
	overflow-x: hidden;/*
	transition: margin-left 0.4s;
	-moz-transition: margin-left 0.4s;
	-webkit-transition: margin-left 0.4s;*/
}
#mobileNavButton { display: none; font-size: 15pt;}
#mobileNav { 
	height: 100%; width: 270px;
	background: #2b2b2b; padding: 10px;
	overflow: scroll;
	overflow-scrolling: touch;
	position: fixed;
	top: 0; left: -270px;
	transition: left 0.4s;
	-moz-transition: left 0.4s;
	-webkit-transition: left 0.4s;
	z-index: 10;
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#mobileNav * { color: #a4a4a4; }
#mobileNav ul.menu li {
	padding: 10px;
	border-bottom: 1px solid #000;
	border-top: 1px solid #4a4a4a;
}
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
.bg-orange { background: #ff9900; color: #fff; }
.bg-white { background: white }
.bg-lighter { background: #f3f6f8 }
.bg-light { background: #e5e5e5 }
.bg-dark { background: #34495e; }
.bg-darker { background: #2b2b2b; color: #fff; }
.bg-black { background: #000; }
.bg-green { background: #27AE60; color: #fff }
.bg-blue { background: #3498DB; color: #fff; }
.bg-purple { background: #8E44AD; color: #fff; }
/*-----------------------------------------COLORTEXT----------*/
.text-white { color: white; }
.text-light { color: #95a5a6;}
.text-blue { color: #3498DB; }
.text-dark { color: #2C3E50; }
.text-orange { color: #ff9900; }
.text-green { color: #27AE60; }

/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/

#top-bar {
	/*overflow: hidden;*/
	height: 50px; background: #2b2b2b;
	line-height: 50px; padding: 0 20px;
	color: #a4a4a4; font-size: 10pt;
	position: relative;
}
#top-bar a { color: #a4a4a4; }
#top-bar strong { font-size: 11pt; cursor: pointer; }
#top-bar > img {
	position: absolute;
	top: 5px; left: 20px;
	width: 45px; 
}
#top-bar .group.search {
	float: left; position: relative;
	width: 250px;
}
#top-bar .group.search input {
	border: 1px solid #000;
	border-radius: 5px; padding: 0 0 0 10px;
	color: #4a4a4a;
	height: 25px; width: 100%
}
#top-bar .group.search i.fa {
	position: absolute; cursor: pointer;
	top: 17px; right: 0px;
}
#top-bar .group.user { float: right; }
#top-bar span { 
	cursor: pointer;
	transition: color .4s; 
	-moz-transition: color .4s; 
	-webkit-transition: color .4s; 
}
#top-bar span i.fa {
	transition: color .4s; 
	-moz-transition: color .4s; 
	-webkit-transition: color .4s; 
}
#top-bar span:hover { color: #fff; }
#top-bar span:hover i.fa { color: #fff; }

#username { position: relative; display: block; }
#username .logout, #username .edit {
	background: #2b2b2b;
	border-top: 1px solid #a4a4a4;
	z-index: 10; width: 100%;
	text-align: center;
	height: 30px; line-height: 30px;
	position: absolute; display: none;
	top: 40px; left: 0;
}
#username:hover .logout {
	display: inline;
}
#username .logout { top: 70px;}

#username:hover .edit {
	display: inline;
}
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/

.wrapper {
	width: 900px; margin: 0 auto;
}
.wrapper:after {
	content: '';
	display: block;
	clear: both;
}
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/

#navigation {
	background: #2b2b2b;
	height: 60px; color: #a4a4a4; 
	line-height: 60px;
}
#navigation a { color: #a4a4a4; }
#navigation .wrapper { padding: 0; }
#navigation .logo, #navigation .brand { float: left; }
#navigation .logo img { width: 45px; margin-top: 10px;}

#navigation ul.menu { float: right; }
#navigation .wrapper ul.menu > li {
	display: inline-block; padding: 0 15px;
	cursor: pointer; position: relative;
}
#navigation ul.menu li:hover { background: #4a4a4a; }
#navigation ul.menu li:hover > a { color: #fff; }
#navigation ul.menu li:hover > ul { display: block; }

#navigation ul.menu > li > ul { 
	position: absolute; display: none; z-index: 10;
	background: #2b2b2b; border-top: 1px solid #ff9900;
	left: 0; width: 200px;
}
#navigation ul.menu > li > ul li {
	padding: 0 10px;
}
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/

figure.book { 
	width: 50%; float: left;/* height: 200px;*/
	padding: 10px 10px 20px; border-bottom: 1px solid #ccc; 
	position: relative;
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
/*figure.book:nth-child(4n+1) { background: #ECF0F1; }*/
/*figure.book:nth-child(4n+2) { background: #ECF0F1; }*/

figure.book:after {
	content: '';
	display: block;
	clear: both;
}
figure.book p { 
	color: #6a6a6a; font-family: 'Roboto Condensed'; 
	margin: 5px 0;
	margin-left: 27%; display: block;
	overflow: hidden; font-weight: 300;
	width: 73%; font-size: 12pt;
}
figure.book i.fa { color: #9a9a9a; }
figure.book .title { 
	font-weight: 300; font-size: 14pt;
	height: 50px; color: #16A085;
}
figure.book .more { 
	text-align: right; margin-top: 10px;
	font-size: 11pt; font-weight: 400;
}
figure.book .more a { 
	color: #ff9900; font-family: "Roboto Condensed"; 
	/*font-weight: 300;*/
}
figure.book .cover {
	position: absolute;
	width: 20%; float: left;
	top: 10px; left: 10px;
	background: url('../img/book_mockup_black.png');
	background-size: 100% 100%;
}
figure.book .cover img {
	display: block;
	width: 80%; height: 86.7%;
	border: 1px solid #333;
	text-align: right;
}
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/

.form {
	position: fixed; z-index: 8;
	/*width: 80%; max-width: 600px;*/
	min-width: 300px;
	max-width: 1000px;
	top: 50%; left: 50%;
	border-radius: 5px;
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	background: #ECF0F1;
}
.form-hidden { display: none;}
.form * { font-size: 12pt; }
.form .title { 
	background: #2b2b2b; color: #a4a4a4; 
	padding: 10px; font-family: "Roboto Condensed";
	margin-bottom: 20px; margin-top: -2px;
	display: block; font-size: 14pt;
	border-bottom: 1px solid #000;
	box-shadow: 0px 1px 0px #4a4a4a;
	-webkit-box-shadow: 0px 1px 0px #eee;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-weight: 400;
}
.form .title i.fa { float: right; margin-top: 4px; font-size: 14pt; color: #D35400; }
.form form { padding: 10px; }
.form form p { margin-bottom: 5px; }
.form form p span { 
	width: 10%; display: inline-block; 
	text-align: center; margin-right: 5%;
}
.form form p span i.fa {
	font-size: 15pt; color: #3498DB; }
.form form input:not(input[type="file"]) {
	border: 1px solid #a4a4a4;
	height: 30px; width: 80%; 
	padding: 5px; color: #4a4a4a;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-radius: 2px;
	/* margin-left: 40px;*/
}
.form form input[type='submit'] { 
	display: block; margin: 20px auto 0;
	padding: 0 10px; width: 80px; border: 0;
	background: #3498DB; color: #fff;
	height: 30px; line-height: 30px;
}
.form form input[type='button'] { 
	display: block; margin: 20px auto 0;
	padding: 0 10px; width: 80px; border: 0;
	background: #3498DB; color: #fff;
	height: 30px; line-height: 30px;
}
/*---------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------*/


@media (max-width: 900px) {
	#navigation .wrapper { padding: 0 15px; }
	.wrapper { 
		width: 100%; 
		box-sizing: border-box;
		-o-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
}
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/

@media (max-width: 768px) {
	#navigation ul.menu { display: none; }
	#navigation {text-align: center; height: 40px; line-height: 40px}
	#navigation .brand { float: none; margin: 0 auto; }
	#mobileNavButton { display: block; float: left;}

	figure.book { padding: 10px; /*height: 150px;*/ }
	figure.book .cover { width: 15%; left: 10px;}
	figure.book p { margin-left: 20%; width: 79%;}
}
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
@media (max-width: 580px) {
	figure.book { width: 100%; margin: 0; }
	figure.book:nth-child(n) { background: #fff; }
	figure.book:nth-child(even) { background: #ECF0F1; }
}
@media (max-width: 480px) {
	.wrapper {padding: 0}
	#top-bar .group.search { width: 50%; }
}